<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公共样式</title>
  <link rel="icon" href="https://blz.nosdn.127.net/1/overwatch/images/common/overwatch.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./fonts/zmy_font/iconfont.css">
</head>

<body>
  <!-- 1、顶部导航栏模块 begin -->
  <div class="top">
    <nav class="desktop">
      <div class="desktop_left">
        <!-- logo模块 -->
        <a href="#" class="desktop_logo"></a>
        <!-- 左侧菜单栏模块 -->
        <div class="desktop_items">
          <ul>
            <li>
              <a href="#" class="active">游戏<i class="iconfont"></i></a>
            </li>
            <li><a href="#">商城</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">电子竞技<i class="dropdown"></i></a></li>
            <li><a href="#">积分福利</a></li>
          </ul>
        </div>
      </div>
      <!-- 右侧菜单栏模块 -->
      <div class="desktop_profileItems">
        <ul>
          <li><a href="#"><span></span> 未成年人家长监护</a></li>
          <li><a href="#">支持</a></li>
          <li><a href="#">我的账户<i class="dropdown"></i></a></li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- 1、顶部导航栏模块 end -->

  <!-- 2、固定定位导航栏模块 begin -->
  <nav class="menu">
    <div class="menu_left">
      <a href="#" class="menu_logo"></a>
      <a href="#" class="menu_pic">
        <i class="iconfont icon-fenlei-shouwangxianfeng"></i>
      </a>
      <ul class="menu_downList">
        <li data-menu="0">
          游戏<i class="iconfont icon-xiangxiajiantou"></i>
          <!-- 隐藏的悬浮下拉列表 -->
          <div class="dropdown_menu">
            <div class="dropdown_menu_arrow"></div>
            <div class="dropdown_menu_content">
              <a href="#">概述</a>
            </div>
          </div>
        </li>
        <li>英雄</li>
        <li>第1赛季</li>
        <li data-menu="1">
          新闻<i class="iconfont icon-xiangxiajiantou"></i>
          <!-- 隐藏的悬浮下拉列表 -->
          <div class="dropdown_menu">
            <!-- 隐藏的悬浮下拉列表的三角形 -->
            <div class="dropdown_menu_arrow"></div>
            <!-- 隐藏的悬浮下拉列表的内容 -->
            <div class="dropdown_menu_content">
              <a href="#">新闻</a>
              <a href="#">补丁</a>
            </div>
          </div>
        </li>
        <li>视频图片</li>
        <li data-menu="2">
          社区<i class="iconfont icon-xiangxiajiantou"></i>
          <!-- 隐藏的悬浮下拉列表 -->
          <div class="dropdown_menu">
            <!-- 隐藏的悬浮下拉列表的三角形 -->
            <div class="dropdown_menu_arrow"></div>
            <!-- 隐藏的悬浮下拉列表的内容 -->
            <div class="dropdown_menu_content">
              <a href="#">论坛<i class="iconfont icon-youshangjiantou"></i></a>
              <dl>
                <dt>电子竞技</dt>
                <dd>守望先锋挑战者选拔赛<i class="iconfont icon-youshangjiantou"></i></dd>
                <dd>守望先锋挑战者系列赛<i class="iconfont icon-youshangjiantou"></i></dd>
                <dd>守望先锋联赛<i class="iconfont icon-youshangjiantou"></i></dd>
              </dl>
            </div>
          </div>
        </li>
        <li data-menu="3">
          商城<i class="iconfont icon-xiangxiajiantou"></i>
          <!-- 隐藏的悬浮下拉列表 -->
          <div class="dropdown_menu">
            <!-- 隐藏的悬浮下拉列表的三角形 -->
            <div class="dropdown_menu_arrow"></div>
            <!-- 隐藏的悬浮下拉列表的内容 -->
            <div class="dropdown_menu_content">
              <a href="#">商城<i class="iconfont icon-youshangjiantou"></i></a>
              <dl>
                <dt></dt>
                <dd>
                  《守望先锋联赛》
                  <p>个性化物品</p>
                </dd>
              </dl>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="menu_download">
      <a href="#">下载游戏</a>
    </div>
  </nav>
  <!-- 2、固定定位导航栏模块 end -->

  <!-- 套用模板时删除此盒子 -->
  <div style="height: 500px; background-color:pink"></div>

  <!-- 3、底部模块制作 begin -->
  <footer>
    <!-- 推广模块 -->
    <div class="socialFooter">
      <p class="txt">关注《守望先锋》“归来”</p>
      <!-- 图标列表 -->
      <ul class="list">
        <li>
          <a href="https://weibo.com/u/5346440662">
            <i class="iconfont icon-xinlangweibo"></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont icon-weixin"></i>
            <p class="img">
              <img src="https://blz.nosdn.127.net/1/ow2/home/weixin.jpg" alt="">
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont icon-bilibili"></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont icon-douyin"></i>
            <p class="img douyin-img">
              <img src="https://blz.nosdn.127.net/1/ow2/home/douyin.jpg" alt="">
            </p>
          </a>
        </li>
        <li>
          <a href="#" class="xiaohongshu">
            <p class="img">
              <img src="https://blz.nosdn.127.net/1/ow2/home/redbook.png" alt="">
            </p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 版权模块 -->
    <div class="footer">
      <!-- 商业合作模块 -->
      <div class="footer_business">
        <ul class="clearfix">
          <li><span class="icon icon1"></span>在线客服</li>
          <li><span class="icon icon2"></span>反馈</li>
          <li><span class="icon icon3"></span>加入我们</li>
        </ul>
      </div>
      <!-- 版权信息模块 -->
      <div class="cprt">
        <a href="" class="footer_logo"></a>
        <a href="" class="footer_origin"></a>
        <div class="footer_info">
          <ul class="clearfix">
            <li><a href="#">隐私</a>|</li>
            <li><a href="#">法律</a>|</li>
            <li><a href="#">条款</a>|</li>
            <li><a href="#">API</a></li>
          </ul>
          <p>
            ©2022 暴雪娱乐有限公司版权所有
            <span>由上海网之易网络科技发展有限公司运营</span>
            <span> | </span>
            <span>新广出审[2016]378号</span>
          </p>
          <p>
            <span>文网游进字[2016]0025号</span>
            <span> | </span>
            <a href="#">增值电信业务经营许可证编号：沪B2－20080012</a>
            <span> | </span>
            <a href="#">沪ICP备：沪B2－20080012－15</a>
          </p>
          <p>
            互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502052167号
            <span> | </span>
            <a href="#">上海市网络游戏行业自律公约</a>
          </p>
          <p>
            <a href="#">
              <img src="https://blz.nosdn.127.net/1/frame/cprt/zx110.png" alt="">
            </a>
            <a href="#">
              <img src="https://blz.nosdn.127.net/1/frame/cprt/sgs-icon.png" alt="">
            </a>
            <a href="#">
              <img src="https://blz.nosdn.127.net/1/frame/cprt/icon20120516.png" alt="">
            </a>
            <span>| 适龄提示：适合13岁及以上使用 </span>
            <a href="#">家长监护工程</a>
            <span> | </span>
            <a href="#">网上有害信息专区</a>
          </p>
        </div>
      </div>
      <!-- 脚注 -->
      <div class="footer_tips">
        <p>
          积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。
          <br />
          健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
        </p>
      </div>
  </footer>
  <!-- 3、底部模块制作 end -->

  <!-- 4、回顶部的悬浮箭头 begin -->
  <div class="iconfont icon-xiangshangjiantou"></div>
  <!-- 4、回顶部的悬浮箭头 end -->

  <!-- 公共样式的js -->
  <script src="./js/common.js"></script>
</body>

</html>